<template>
	<view>
		<!-- 头部 -->
		<view class="header">
			<!-- 自定义标题栏 -->
			<view :style="{height:statusBarHeight+'px'}"></view>
			<view class="homeLogo" :style="{'margin-top':menuButtonInfo_top-statusBarHeight+4+'px'}">
				<image src="https://res.huibiaow.cn/file/20250709/17520481971216.png" class="logo_img"></image>
				<view class="title"></view>
				<view class="title"> </view>
			</view>
			<view :style="{height:20+'px'}"></view>
			<!-- 搜索框 -->
			<view class="searchBox">
				<view class="search">
					<view class="search_left">
						<uni-data-select v-model="searchScopeValue" :localdata="searchScope" :clear="false"
							@change='selectChange'></uni-data-select>
					</view>
					<input v-model="params.search_value" type="text" placeholder="请输入搜索关键词" class="search_input"
						:placeholder-style="placeholderStyle" @confirm="clickSearch()" confirm-type="search" />
					<view class="search_btn" @click="clickSearch()">搜索</view>
				</view>
			</view>
			<view class="filter_box">
				<HMfilterDropdown :filterData="filterData" :defaultSelected="defaultSelected" :updateMenuName="true"
					:menuTop="menuTop" :typeSubmenu='typeSubmenu' :groupSubmenu='groupSubmenu'
					@resetFilterData='resetFilterData' @search="search" dataFormat="Object" @togglePage='togglePage'
					ref='hideFilt'>
				</HMfilterDropdown>
				<!-- 	<view class="nav"> 
						<view class="first-menu" :class="{'on':showPage==index}" v-for="(item,index) in menu" :key="index"  @tap="togglePage(index)">
							<text class="name">{{item.name}}</text>
							<text class="iconfont triangle" :style="'transform:rotate('+triangleDeg[index]+'deg);'"></text>
						</view> 
				</view> -->
			</view>
		</view>
		<view class="trademark_list_box">
			<view style="height: 10rpx;"> </view>
			<view class="checkAllbox">
				<label class="checkAllLabelBox" @click='checkAllChange' v-if="is_jgg==1">
					<checkbox :value="checkAll" :checked="checkAll" /><text>全选</text>
				</label>
			</view>
			<view style="height: 10rpx;"></view>
			<scroll-view class="lists" :scroll-top="0" @scrolltolower="scrolltolower" scroll-y="true">
				<view class="item_box" v-if="goodsList.length!=0">
					<checkbox-group class="checkboxGroup" @change="checkboxChange">
						<view class="item" v-for="(item,index) in goodsList" :key="index">
							<view class="list_body_each">
								<view class="checkBox">
									<label>
										<checkbox :value="JSON.stringify(item)" :checked="item.checked"
											v-if="is_jgg==1" />
									</label>
								</view>
								<view class="list_content_box" @click="clickTrademarkDetails(item)">
									<view class="img_box">
										<image :src="item.mark_descriptions" alt="" class="shbao_img" mode="aspectFit">
										</image>
										<view class="tm_box" v-if="item.same_shangbiao_count>1">
											同名{{item.same_shangbiao_count}}类</view>
									</view>
									<view class="shbao_name el">{{item.shangbiao_name}}</view>
									<view class="type_equally">
										<view class="type_box">{{item.category}}类</view>
										<view class="equally_box">{{item.service_count}}个小项</view>
									</view>
									<view class="price" v-if="item.is_price==1"> <text>¥</text> {{item.price}} </view>
								</view>
							</view>
						</view>
					</checkbox-group>
				</view>
				<view class="item_box_kong_box" v-if="goodsList.length ==0">
					<image src="https://res.huibiaow.cn/file/20250710/17521145008102.png" class="item_box_kong"></image>
					<view class="item_box_kong_text">未找到相关商标信息</view>
				</view>
			</scroll-view>
			<view class="fiexd_box" v-if="checkArr.length>0&is_jgg==1">
				<view class="fiexd_left">
					已选商标: <view class="checkNumber">{{checkArr.length}}</view>
				</view>
				<view class="fiexd_center" @click="close">清空</view>
				<button class="jggBtn" @getphonenumber='getphonenumber' open-type="getPhoneNumber"
					v-if="phone==''&&share_phone==''">九宫格制作</button>
				<view class="jggBtn" @click='toJGG' v-if='phone!=""||share_phone!=""'>九宫格制作</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import HMfilterDropdown from '@/components/HM-filterDropdown/HM-filerShop.vue';
	import trademarkList from '@/components/trademarkList/trademarkList.vue';
	import data from '@/common/index.js'; //筛选菜单数据
	export default {
		components: {
			HMfilterDropdown,
			'trademark-list': trademarkList
		},
		computed: {
			...mapState(['Statephone', 'is_jgg', "level"])
		},
		data() {
			return {
				// 回到顶部盒子显示
				showButton: false,
				// 状态栏的高度
				statusBarHeight: 80,
				// 导航栏的高度
				navBarHeight: 45,
				// 可使用窗口宽度
				windowWidth: 375,
				// 胶囊顶部高度
				menuButtonInfo_top: 100,
				placeholderStyle: 'font-family: Alibaba PuHuiTi; font-weight: 400; font-size: 24rpx;color: #333333;',
				searchScope: [{
						value: 2,
						text: '智能'
					},
					{
						value: 5,
						text: '群组'
					},
					{
						value: 6,
						text: '小项'
					},
				],
				checkArr: [],
				checkAll: false,
				searchScopeValue: 2, //选择搜索范围
				searchType: '智能', //搜索类型
				filterData: [],
				defaultSelected: [],
				menuTop: 275,
				params: {
					page: 1,
					limit: 15,
					filter_sort: '',
					filter_group: '',
					filter_price: '',
					filter_type: '',
					filter_combination: '',
					filter_words: '',
					search_type: 2, //搜索类型
					search_value: '', //搜索文字
				},
				loadAll: false,
				goodsList: [], //商标列表
				typeSubmenu: [], //类别列表
				groupSubmenu: [], //群组列表 
				loginCode: "",
				share_phone: "",
				phone: "",
				share_level: "",
			}
		},
		onLoad(options) {
			this.filterData = data;
			// console.log('this.filterData',this.filterData);
			// console.log("this.filterData",this.filterData[1].submenu[1].submenu)
			this.getTransference();
			this.share_phone = options.phone ? options.phone : uni.getStorageSync("share_phone")
			this.share_level = options.level ? options.level : uni.getStorageSync("share_level")
			this.phone = uni.getStorageSync("phone");
			if (this.share_phone != undefined) {
				uni.setStorageSync("share_phone", this.share_phone)
			}
			if (this.share_level != undefined) {
				uni.setStorageSync("share_level", this.share_level)
			}
			if (this.phone != "") {
				this.changeTabBar(this.phone + "-" + this.level)
			} else {
				this.changeTabBar(this.share_phone + "-" + this.share_level)
			}
		},
		onShow() {
			this.checkArr = [];
			this.checkAll = false;
			this.loadGoods();
			this.getPhone()
			// uni.hideTabBar()
		},
		onShareTimeline(res) {
			let _this = this;
			if (this.phone != "" || this.Statephone != "") {
				let share_level = 0
				if (Number(this.level) != 3) {
					share_level = Number(this.level) + 1
				} else {
					share_level = 3
				}
				return {
					title: "商标交易-湖北千标",
					path: '/pages/index/index',
					query: 'phone=' + (this.phone ? this.phone : this.Statephone) + "&level=" +
						Number(share_level)
				}
			} else {
				if (this.share_phone != "") {
					let share_level = 0
					if (Number(this.level) != 3) {
						share_level = Number(this.level) + 1
					} else {
						share_level = 3
					}
					return {
						title: "商标交易-湖北千标",
						path: '/pages/index/index',
						query: "phone=" + this.share_phone + "&level=" + Number(share_level)
					}
				} else {
					return {
						title: '商标交易-湖北千标',
						path: '/pages/index/index',
					}
				}

			}
		},
		onShareAppMessage(res) {
			let _this = this;
			if (this.phone != "" || this.Statephone != "") {
				if (res.from === 'button') { // 来自页面内分享按钮
					if (res.target.dataset.name === 'shareBtn') {
						let share_level = 0
						if (Number(this.level) != 3) {
							share_level = Number(this.level) + 1
						} else {
							share_level = 3
						}
						return {
							title: "商标交易-湖北千标",
							path: '/pages/index/index?phone=' + (this.phone ? this.phone : this.Statephone) + "&level=" +
								Number(share_level),
						}
					}
				}
				if (res.from === "menu") { // 来自页面右上角分享 
					// console.log(this.level)
					let share_level = 0
					if (Number(this.level) != 3) {
						share_level = Number(this.level) + 1
					} else {
						share_level = 3
					}
					return {
						title: '商标交易-湖北千标',
						path: '/pages/index/index?phone=' + (this.phone ? this.phone : this.Statephone) + "&level=" +
							Number(share_level),
					}
				}
			} else {
				if (this.share_phone != "") {
					if (res.from === 'button') { // 来自页面内分享按钮
						if (res.target.dataset.name === 'shareBtn') {
							let share_level = 0
							if (Number(this.level) != 3) {
								share_level = Number(this.level) + 1
							} else {
								share_level = 3
							}
							return {
								title: "商标交易-湖北千标",
								path: '/pages/index/index?phone=' + this.share_phone + "&level=" + Number(share_level),
							}
						}
					}
					if (res.from === "menu") { // 来自页面右上角分享 
						let share_level = 0
						// console.log(this.level)
						if (Number(this.level) != 3) {
							share_level = Number(this.level) + 1
						} else {
							share_level = 3
						}
						return {
							title: '商标交易-湖北千标',
							path: '/pages/index/index?phone=' + this.share_phone + "&level=" + Number(share_level),
						}
					}
				} else {
					if (res.from === 'button') { // 来自页面内分享按钮
						if (res.target.dataset.name === 'shareBtn') {
							return {
								title: "商标交易-湖北千标",
								path: '/pages/index/index',
							}
						}
					}
					if (res.from === "menu") { // 来自页面右上角分享 
						return {
							title: '商标交易-湖北千标',
							path: '/pages/index/index',
						}
					}
				}

			}

		},
		methods: {
			...mapMutations(['setUserMessage', 'changeTabBar']),
			// 重置商标分类筛选
			resetFilterData() {
				// let groupSubmenuData = this.groupSubmenu;
				// this.groupSubmenu = []; 
				// this.getTransference();
			},
			// 查看商标详情
			//搜索下拉框的change事件
			selectChange(e) {
				// console.log("selectChange", e);
				switch (e) {
					case 2:
						this.searchType = '智能';
						this.params.search_type = 2;
						break;
					case 5:
						this.searchType = '群组';
						this.params.search_type = 5;
						break;
					case 6:
						this.searchType = '小项';
						this.params.search_type = 6;
						break;
					default:
						// 如果不匹配任何 case 值，则执行 default 子句中的代码块  
						break;
				}

			},
			checkboxChange(e) {
				this.checkArr = e.detail.value;
				for (let index in this.checkArr) {
					this.checkArr[index] = JSON.parse(this.checkArr[index])
				}
				if (this.checkArr.length == this.goodsList.length) {
					this.checkAll = true
				}
				let checkedArr = []
				this.checkArr.forEach((item, index) => {
					checkedArr.push(item)
				})
				let checkedIdArr = []
				for (let i of checkedArr) {
					checkedIdArr.push(i.id)
				}
				this.goodsList.forEach(item => {
					item.checked = checkedIdArr.includes(item.id);
				});
			},
			checkAllChange(e) {
				this.checkAll = !this.checkAll;
				if (this.checkAll) {
					for (let v of this.goodsList) {
						v.checked = true;
					}
					this.checkArr = this.goodsList
				} else {
					for (let v of this.goodsList) {
						v.checked = false;
					}
					this.checkArr = []
				}
			},
			async close() {
				this.checkAll = false;
				for (let view of this.goodsList) {
					view.checked = false;
				}
				this.checkArr = []
			},
			clickTrademarkDetails(item) {
				uni.navigateTo({
					url: '/subHomePage/trademarkDetails/trademarkDetails?id=' + item.id
				});
			},
			// 搜索
			clickSearch() {
				// if (this.params.search_value == '') {
				// 	uni.showToast({
				// 		title: '请输入搜索关键词',
				// 		icon: 'none'
				// 	});
				// 	return false
				// }
				this.loadAll = false;
				this.loadGoods();
				this.showPage = -1
				this.$refs.hideFilt.hideFilt();
			},
			// togglePage(e){
			// 	this.typeSubmenu = e;
			// }, 
			search(options) {
				// console.log('search==>options',options);
				this.params.filter_sort = options.filter_sort ? options.filter_sort : '';
				this.params.filter_group = options.group_type ? options.group_type : '';
				this.params.filter_price = options.filter_price ? options.filter_price.join('@') : '';
				this.params.filter_type = options.filter_type ? options.filter_type : '';
				this.params.filter_combination = options.filter_combination ? options.filter_combination : ''
				this.params.filter_words = options.filter_words ? options.filter_words : '';
				this.loadAll = false;
				this.loadGoods();
			},
			scrolltolower() {
				if (!this.loadAll) {
					this.loadGoods(true);
				}
			},
			async getPhone() {
				const that = this
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						that.loginCode = loginRes.code;
					}
				});
			},
			getphonenumber(e) {
				this.$request({
					url: 'index/index/wxLogin',
					data: {
						'code': this.loginCode,
						'iv': e.detail.iv,
						'encryptedData': e.detail.encryptedData
					},
					success: (res) => {
						if (res.code === 200) {
							uni.setStorageSync("phone", res.data.wx_list.phoneNumber)
							uni.setStorageSync("level", res.data.user_date.level)
							this.phone = res.data.wx_list.phoneNumber
							this.setUserMessage(res.data)
							this.toJGG()
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					}
				}, false);
			},
			toJGG() {
				uni.setStorageSync("selections_data", JSON.stringify(this.checkArr));
				uni.navigateTo({
					url: '/pages/JGG/JGG'
				});
			},
			async loadGoods(add = false) {
				if (add) {
					this.params.page += 1;
				} else {
					this.params.page = 1;
				}
				// uni.showLoading({
				// 	title: '请稍后..',
				// 	mask: true,
				// });
				this.$request({
					url: 'index/index/sbzr_data',
					data: {
						...this.params
					},
					success: (res) => {
						uni.hideLoading();
						if (res.code == 0) {
							// console.log("res", res)
							const data = res.data.list;
							if (add) {
								this.goodsList = [...this.goodsList, ...data];
								if (this.checkAll) {
									this.checkArr = this.goodsList
									for (let index of this.goodsList) {
										index.checked = true;
									}
								}
							} else {
								this.goodsList = data;
								for (let index of this.goodsList) {
									index.checked = false;
								}
							}
							if (data.length < 15) {
								this.loadAll = true;
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					Error: (err) => {
						console.log(err)
					}
				});
			},
			async getTransference() {
				this.$request({
						url: 'index/index/transference',
						success: (res) => {
							if (res.code == 0) {
								this.typeSubmenu = [];
								var parent_category = res.data.parent_category;
								for (let item in parent_category) {
									this.typeSubmenu.push({
										"id": parent_category[item].id,
										"name": parent_category[item].id + '-' + parent_category[item]
											.name,
										"value": parseInt(parent_category[item].id),
										"selected": false,
									})
								}
								this.filterData[1].submenu[0].submenu = this.typeSubmenu;

								var son_category = res.data.son_category;
								this.groupSubmenu = Object.keys(son_category).map(type_id => {
									return {
										type_id: parseInt(type_id), // 转换type_id为数字类型
										list: Object.keys(son_category[type_id]).map((value,
											index) => {
											return {
												id: index + 1, // 为每个项生成唯一的id
												name: son_category[type_id][value], // 获取名称
												value: value, // 获取值
												selected: false,
											};
										})
									};
								});
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
							}
						},
						Error: (err) => {
							console.log(err)
						}
					},
					false
				);
			},
		},
		// 查询手机信息
		created() {
			// funs.changeImage()
			// 获取手机系统信息
			const info = uni.getSystemInfoSync()
			// console.log(info);
			// 设置状态栏高度
			this.statusBarHeight = info.statusBarHeight
			this.windowWidth = info.windowWidth
			// h5 app mp-alipay
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			// 获取胶囊的位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// console.log(menuButtonInfo);
			// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
			this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info
				.statusBarHeight)
			this.menuButtonInfo_top = menuButtonInfo.top;
			// console.log(this.menuButtonInfo_top);
			this.windowWidth = menuButtonInfo.left
			// #endif
		},
	}
</script>

<style lang='scss'>
	page {
		background: #fff;
	}

	.header {
		background: #FFFFFF;
		/* padding-bottom: 80rpx; */
		position: sticky;
		top: 0rpx;
		z-index: 20;

		.homeLogo {
			margin-left: 30rpx;

			.logo_img {
				width: 213rpx;
				height: 46rpx;
			}
		}

		/* 搜索 */
		.searchBox {
			border-radius: 35rpx;
			margin: 0rpx 24rpx 24rpx 24rpx;
			height: 70rpx;
			padding: 0rpx 5rpx 0rpx 5rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;

			.search {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;
				flex: 1;
				border: 1px solid #E0E2E5;
				border-radius: 35rpx;

				.search_left {
					width: 150rpx;
					border-right: 2rpx solid #DFE3E7;
					flex-shrink: 0;

					/deep/ .uni-select {
						border: 0rpx !important;
						background: transparent !important;
						height: 40rpx !important;
						padding-right: 20rpx !important;
						border: none !important;
					}

					.uni-select__selector-item {
						justify-content: center;
					}

					.uni-select__input-box {
						height: 40rpx !important;
					}

					.uni-select__selector {
						z-index: 16 !important;
					}
				}

				.search_input {
					margin-left: 18rpx;
					margin-right: 18rpx;
					flex: 1
				}

				.search_btn {
					flex-shrink: 0;
					width: 120rpx;
					height: 70rpx;
					border-radius: 35rpx;
					background: linear-gradient(270deg, #D32020 0%, #DE2C2C 100%);
					text-align: center;
					line-height: 70rpx;
					font-size: 24rpx;
					color: #fff;
				}
			}
		}

	}

	.filter_box {
		margin: 0rpx 24rpx 0rpx 24rpx;
		height: 44px;

		/* .HMfilterDropdown{
			position: unset !important;
		} */
		.nav {
			border: none;
		}

		.sub-menu-class {
			top: -4rpx !important;
		}

		/* .nav {
			width: 100%;
			height: 44px;
			z-index: 12;
			background-color: #ffffff;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;

			.first-menu {
				width: 100%;
				font-size: 15px;
				color: #333333;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				transition: color .2s linear;

				&.on {
					color: #ff4e1f;
					font-weight: bold;

					.iconfont {
						color: #ff4e1f;
					}
				}

				.name {
					height: 20px;
					text-align: center;
					text-overflow: clip;
					overflow: hidden;
				}

				.iconfont {
					font-size: 12px;
					margin-left: 5px;
					align-items: center;
					justify-content: center;
					transition: transform .3s linear, color .3s linear;
				}
			}
		} */
	}

	.checkboxGroup {
		display: flex;
		flex-wrap: wrap;
	}

	.trademark_list_box {
		background: url(https://res.huibiaow.cn/file/20250710/17521094788424.png) no-repeat;
		background-size: 100% auto;
		background-color: #f3f5f7;

		.lists {
			height: 70vh;
		}

		.item_box {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			margin: 0rpx auto 0rpx auto;
			width: calc(100% - 50rpx);


			.item {
				margin-right: 2%;
				width: 32%;

				&:nth-of-type(n+4) {
					margin-top: 16rpx;
				}
			}

			.list_body_each {
				width: 100%;
				background: #FFFFFF;
				border-radius: 10rpx;
				padding: 10rpx 10rpx 15rpx 10rpx;
				box-sizing: border-box;

				.checkBox {
					margin-bottom: 10rpx;

					checkbox {
						width: 100%;
					}
				}

				.img_box {
					width: 100%;
					height: 200rpx;
					background: #fff;
					border-radius: 10rpx;
					border: 1px solid #DFE3E5;
					display: flex;
					flex-direction: column;
					flex-wrap: nowrap;
					align-content: center;
					justify-content: center;
					align-items: center;
					position: relative;
					// margin: 0px auto;

					.shbao_img {
						max-width: 80%;
						max-height: 80%;
					}

					.tm_box {
						position: absolute;
						background-color: #FFE9E9;
						color: #C56A6A;
						font-size: 18rpx;
						line-height: 30rpx;
						padding: 0 18rpx;
						right: 4rpx;
						bottom: 5rpx;
						border-radius: 10px;
					}
				}

				.shbao_name {
					// width: 187rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 600;
					font-size: 30rpx;
					color: #333333;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin: 10rpx 0rpx;
					text-align: center;
				}

				.type_equally {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					flex-wrap: nowrap;
					margin: 0rpx 0rpx 10rpx 0rpx;

					.type_box {
						width: 70rpx;
						height: 24rpx;
						line-height: 24rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 20rpx;
						color: #666666;
						text-align: center;
					}

					.equally_box {
						font-family: Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 20rpx;
						color: #333333;
						width: 110rpx;
						height: 24rpx;
						line-height: 24rpx;
						border-left: 2rpx solid #DEDEDE;
						text-align: center;
					}
				}

				.price {
					font-family: Alibaba PuHuiTi;
					font-weight: bold;
					font-size: 24rpx;
					color: #FF4B21;
					text-align: center;

					text {
						font-size: 24rpx;
					}
				}
			}

			.item:nth-child(3n) {
				margin-right: 0rpx;
			}
		}

		.item_box_kong_box {
			width: calc(100% - 48rpx);
			margin: 22rpx auto 0;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			background: rgba(255, 255, 255, 0.5);

			.item_box_kong {
				width: 333rpx;
				height: 300rpx;
			}

			.item_box_kong_text {
				margin-top: 30rpx;
				font-size: 24rpx;
				color: #999999;
				text-align: center;
			}
		}

	}

	.checkAllbox {
		display: flex;
		justify-content: right;
		text-align: right;
		padding: 0 20rpx;
		box-sizing: border-box;

		.checkAllLabelBox {
			background-color: #fff;
			border-radius: 15rpx;
			padding: 10rpx 20rpx;
			display: flex;
			align-items: center;
		}
	}

	@font-face {
		font-family: "HM-FD-font";
		src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMoAAsAAAAABxwAAALZAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqBYIFNATYCJAMQCwoABCAFhG0HPRs0BsgusG3YowCKZblG/A248I8FOyAe+Oye987uPHySFUCVQo0KTFJCRZnz739uc6TZ6xcSFkmmSfPs/p8faiVYyJAysa8jwJbrp83gaCY/j/s8l9O7q4ACmd/Ochtr0Z5+1AswDijQsQZt4QI6QW6pXcSBwSv/1nYCCqqqsdC7M5oKSRHpFxDmudwQkr2QKEbZvCA7MzUKh2Tkk93JOxzUvw//aBnyJDIpMnTQjLYt1H4v9UeQN/18GCcJYQJ3dgYpGiMSZs2mppCFiJ8qyI6iLfLyEn7P/b7mjxDH1smHZfQvjyCRErJIZWHQ2kun/J7jNIHfTzQJf4gVUvghxnw/0x4DfV5lXaBHlFVi7aO0/bxWdv6+cPdRmdlrbzn+qfO6PVN6994+P/v5PWXZ++LdvWUs9gsXP7QrtrfB91P9aflbn1u37JV5vmPHmbH/a+bW/pculdBKpMfTy/pJ27c1d3s3Ha40b4Xnb7c73PMn7hxVM+r+psb222nvS698xqM+qUXITmlvaakgkG5KhgsC6ePkJarZcby5/0ws1vn5QhH8iDY/1tYIZoAvBViBWAWwLpYq4ogxV3N5FYzKghIJClIX6MxR0m9XGMuAawnyyhwI5lRpkcqrTUZeY2QU0hpZed1QUCP9ZhdSyhKyEAugoe0OguIeIlHUK6SKe09G3q/IKOs/ZBUPKQoaEUotWUjdMDvda4XGBm2YcoTZFkWMuTZpUz1Gvg2MVVelBXNcrd0otGjafJjtYoSrK0Ys3fHKsg2DGSsKoa+zGwYBwaIVeWhtCrM2m0W1WbMZc3cqTKVQSOtlBRk2kA1McQRms5AIk8030qPvjyFuK2BYrTAW0nNoZc1tH7TQVHMA2dVHIMav3LLUDlexzAYDZlghIdDX8aKApghYNN/JgywbBbMOJBaqmnmNZkD1heeNIYZboCByVgxJSEMMGdlpW5fTVplG+0he5RqCAAAAAA==') format('woff2')
	}

	.iconfont {
		font-family: "HM-FD-font" !important;
		// font-size: 18px;
		font-style: normal;
		color: #333333;
		margin-top: 5rpx;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;

		&.triangle {
			&:before {
				content: "\e701";
			}
		}

		&.selected {
			&:before {
				content: "\e613";
			}
		}
	}

	.fiexd_box {
		position: fixed;
		bottom: 10rpx;
		left: 5%;
		width: 90%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		box-shadow: 0px 2px 10px 0px rgba(61, 64, 64, 0.15);
		border-radius: 20rpx;

		.fiexd_left {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fffaf9;
			width: 33%;
			text-align: center;
			font-size: 28rpx;

			.checkNumber {
				color: #ff2d56;
			}
		}

		.fiexd_center {
			width: 33%;
			text-align: center;
			font-size: 28rpx;
		}

		.jggBtn {
			width: 33%;
			text-align: center;
			border-radius: 26rpx;
			background: linear-gradient(-64deg, #ff2d40 0%, #ff2d56 100%);
			color: #fff;
			height: 52rpx;
			line-height: 52rpx;
			font-size: 28rpx;
		}
	}
</style>